import React, { FC, useEffect, useRef } from "react";
import * as echarts from "echarts";
import { EChartsOption, EChartsResponsiveOption } from "echarts";
import type { ContainerDistType } from "@/types/echartInterface";
import { MultiBarcolorList } from "@/constant";
interface Iprops {
  containerDist: ContainerDistType;
  lineStyle: {
    width: string;
    height: string;
  };
}
const SingleBarChart: FC<Iprops> = (props: Iprops) => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  const { containerDist, lineStyle } = props;
  const { legendData = [], xData = [], seriesData = [] } = containerDist || {};

  useEffect(() => {
    // Initialize the chart
    const chartInstance = echarts.init(chartRef.current!);
    const series: echarts.SeriesOption[] | undefined = seriesData.map(
      (item, index) => {
        return {
          name: item.name,
          type: "bar",
          barWidth: 10,
          data: item.list,
          itemStyle: {
            borderRadius: [5, 5, 5, 5], // Rounded corners on top
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: MultiBarcolorList[index][0],
              },
              {
                offset: 1,
                color: MultiBarcolorList[index][1],
              },
            ]),
          },
        };
      }
    );

    const options: EChartsOption = {
      title: {
        text: "容器版本统计",
        left: "center",
        top: 2,
      },
      axisLabel: {
        //设置x轴的字
        show: true,
        interval: 0, //使x轴横坐标全部显示
      },

      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      legend: {
        data: legendData,
        right: "30",
        top: 40,
      },
      xAxis: [
        {
          type: "category",
          data: xData,
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "(台)",
          interval: 5000,
          max: 20000,
          nameTextStyle: {
            color: "000000",
            fontSize: 14,
            fontFamily: "PingFangSC, PingFang SC;",
            align: "left",
            verticalAlign: "middle",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(223, 223, 223, 1)",
              type: "dashed",
            },
          },
        },
      ],
      grid: {
        top: 70, // Adjusted to ensure enough space for the legend
        right: 15,
        bottom: 0,
        left: 15,
        containLabel: true,
      },
      barBorderRadius: 10,
      series: series,
      graphic: {
        type: "text",
        left: "center",
        top: "middle",
        silent: true,
        invisible: xData.length != 0,
        style: {
          fill: "#ccc",
          fontWeight: "bold",
          text: "暂无数据",
          fontSize: "15px",
        },
      },
    };

    // Use the specified options
    chartInstance.setOption(options as EChartsResponsiveOption);
    const resizeChart = () => {
      chartInstance.resize();
    };
    window.addEventListener("resize", resizeChart);
    // Cleanup chart instance on component unmount
    return () => {
      window.removeEventListener("resize", resizeChart);
      chartInstance.dispose();
    };
  }, [legendData, xData, seriesData]);

  return <div ref={chartRef} style={lineStyle} />;
};

export default SingleBarChart;
